<template>
  <div class="update-history">
    <el-input v-model="title" placeholder="请输入课程类别">
      <el-button slot="append" type="primary" icon="el-icon-search" />
    </el-input>
    <el-card class="box-card">
      <template v-for="item in Object.keys(logData)">
        <div v-for="log in logData[item]" :key="log.id">
          <div slot="header" class="clearfix">
            <span>{{ item }}</span>
          </div>
          <div class="history-item"><span class="time">{{ log.time }}</span> <span class="content">爬取{{ log.name }}的{{ crawlerMap[log.type] + log.count }}条记录</span></div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { crawlerMap } from '@/utils/dictionary'

export default {
  data() {
    return {
      title: '',
      logData: {},
      crawlerMap // 爬虫字典
    }
  },
  created() {
    this.getLogList()
  },
  methods: {
    async getLogList() {
      const res = await this.$api.getLogList()
      if (res && res.code === 200) {
        const data = res.data.records
        const dict = {}
        data.forEach(item => {
          const day = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
          const [date, time] = day.split(' ')
          const customDict = {
            id: item.id,
            count: item.count,
            type: item.type,
            time,
            name: item.name
          }
          if (dict[date]) {
            dict[date].push(customDict)
          } else {
            dict[date] = [customDict]
          }
        })
        this.logData = dict
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.history-item{
  padding: 5px 0;
  font-size: 16px;
  .time{
    font-size: 14px;
    color: #848484;
  }
  .content{
    font-size: 15px;
    color: #636466;
  }
}
::v-deep .el-card__header{
  padding: 10px 20px;
}
::v-deep .el-card__body{
  padding: 10px 20px;
  height: calc(100vh - 150px);
  overflow: auto;
  @include scrollBar;
}
</style>
